<template>
  <div>
    <el-row :gutter="10" class="m-b-10">
      <el-col :span="24">
        <el-card style="background-color: rgba(255, 255, 255,1)" class="first-card">
          <div slot="header" class="total blog-info">
            <div class="nkname">
              <i class="el-icon-user m-r-5"></i>
              <span class="header">{{ blog.user.userName }}</span>
            </div>
            <div class="date">
              <i class="el-icon-date m-r-5"></i>
              <span>{{ blog.createTime }}</span>
            </div>
            <div class="reply">
              <i class="el-icon-view m-r-5"></i>
              <span>{{ blog.views }}</span>
            </div>
          </div>

          <h2 class="blog-title header">{{ blog.title }}</h2>
          <div v-if="blog.summary" class="summary" style="text-align: center;">{{ blog.summary }}</div>

          <div class="content" v-if="blog.channel === '1' || blog.channel === '2'">
            <div style="padding: 20px;" v-if="blog.editor === 'tinymce'" v-html="blog.html"></div>
            <div style="padding: 20px;" v-if="blog.editor === 'markdown'" v-html="blog.html"></div>
          </div>
          <div class="content" v-if="blog.channel === '3'">
            <image ref="image_ref" :src="blog.imageSource" width="100%" />
          </div>
          <div class="content" v-if="blog.channel === '4'">
            <video ref="video_ref" :src="blog.videoSource" controls="controls" width="100%" object-fill="fill" />
          </div>

          <el-tag
            v-for="tag in optionOfTag"
            :key="tag"
            :disable-transitions="true"
            size="small"
            class="m-l-5 m-t-10"
          >
            {{ tag }}
          </el-tag>
        </el-card>
      </el-col>
    </el-row>

    <arrow-up />
  </div>
</template>

<script>
import { blogLoad } from '@/api/blog/blog'
import 'mavon-editor/dist/css/index.css'
import ArrowUp from '@/components/ArrowUp'

export default {
  name: 'ArticleDetail',
  components: {
    ArrowUp
  },
  data() {
    return {
      blog: {
        articleId: undefined,
        status: undefined,
        thumbnail: '',
        source: 'manual',
        title: undefined,
        summary: undefined,
        editor: 'markdown',
        content: undefined,
        html: undefined,
        open: '0',
        crypto: '1',
        memberGrowth: 0,
        salt: undefined,
        weight: 0,
        channel: undefined,
        direction: undefined,
        tags: '',
        views: 0,
        favors: 0,
        comments: 0,
        group: undefined,
        groupIndex: undefined,
        imageSource: undefined,
        videoSource: undefined,
        createBy: undefined,
        createTime: undefined,
        user: {
          userId: undefined,
          loginName: undefined,
          userName: undefined
        }
      },
      optionOfTag: [],
      optionOfChannel: []
    }
  },
  methods: {
    init(articleId) {
      // 加载下拉菜单
      this.getDictData()
      if (articleId) {
        this.blog.articleId = articleId
      }
      this.$nextTick(() => {
        // 加载表单数据
        this.loadForm()
      })
    },
    getDictData() {
      this.$dictGroup('blog_article_channel').then(response => {
        this.optionOfChannel = response
      }).catch(e => {})
    },
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    loadForm() {
      if (this.blog.articleId) {
        blogLoad({ 'id': this.blog.articleId }).then(response => {
          this.blog = this.$api.objectUpdate(this.blog, response.param)
          if (this.blog.tags) {
            this.optionOfTag = this.blog.tags.split(',')
          }
          if (this.blog.channel === '3') {
            this.blog.imageSource = this.getImageSrc(this.blog.content)
          } else if (this.blog.channel === '4') {
            this.blog.videoSource = this.$api.getVideoSrc(this.blog.content)
          }
        }).catch(() => {})
      }
    },
    onClose() {
      this.blog = {
        articleId: undefined,
        status: undefined,
        thumbnail: '',
        source: 'manual',
        title: undefined,
        summary: undefined,
        editor: 'tinymce',
        content: undefined,
        html: undefined,
        open: '0',
        crypto: '1',
        memberGrowth: 0,
        salt: undefined,
        weight: 0,
        channel: undefined,
        direction: undefined,
        tags: '',
        views: 0,
        favors: 0,
        comments: 0,
        group: undefined,
        groupIndex: undefined,
        imageSource: undefined,
        videoSource: undefined,
        createBy: undefined,
        createTime: undefined,
        user: {
          userId: undefined,
          loginName: undefined,
          userName: undefined
        }
      }

      this.optionOfTag = []
      this.optionOfChannel = []
    }
  }
}
</script>

<style>
  .blog-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  .blog-title {
    text-align: center;
    font-weight: bold;
  }

  .summary {
    color: #999;
    text-align: center;
    font-size: 14px;
    flex-grow: 1;
    margin: 20px;
  }

  .content {
    text-align: left;
    flex-grow: 1;
  }

  .content p {
    font-size: 16px;
  }

  .hljs {
    padding: 10px;
    font-size: small;
    line-height: 16px;
  }

  .nkname {
    margin: 10px;
    max-width: 530px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .date {
    color: #999;
    margin-left: 10px;
  }

  .reply {
    color: #999;
    margin-left: 10px;
  }
</style>
